<template>
  <div class="demo-page">
    <!-- 顶部标题 -->
    <header class="demo-header">
      <h1>🎨 设计模式演示</h1>
      <p class="subtitle">工厂模式 & 观察者模式</p>
    </header>

    <!-- 工厂模式演示区域 -->
    <section class="demo-section">
      <div class="section-title">
        <span class="icon">🏭</span>
        <h2>工厂模式演示</h2>
      </div>
      <p class="description">
        工厂模式就像一个"生产车间"，根据你提供的类型，创建对应的产品。
      </p>
      
      <div class="button-group">
        <button 
          v-for="type in factoryTypes" 
          :key="type.value"
          class="demo-btn"
          :class="{ active: activeFactory === type.value }"
          @click="testFactory(type.value)"
        >
          <span class="btn-icon">{{ type.icon }}</span>
          <span>{{ type.label }}</span>
        </button>
      </div>

      <div v-if="factoryResult" class="result-box">
        <div class="result-title">📋 执行结果：</div>
        <div class="result-content">{{ factoryResult }}</div>
      </div>
    </section>

    <!-- 观察者模式演示区域 -->
    <section class="demo-section">
      <div class="section-title">
        <span class="icon">👀</span>
        <h2>观察者模式演示</h2>
      </div>
      <p class="description">
        观察者模式就像"朋友圈订阅"，当事件发生时，所有观察者都会收到通知。
      </p>
      
      <div class="button-group">
        <button 
          v-for="event in observerEvents" 
          :key="event.type"
          class="demo-btn observer-btn"
          @click="testObserver(event.type)"
        >
          <span class="btn-icon">{{ event.icon }}</span>
          <span>触发{{ event.label }}</span>
        </button>
      </div>

      <div v-if="observerResults.length > 0" class="result-box">
        <div class="result-title">📋 观察者执行结果：</div>
        <div class="observer-logs">
          <div 
            v-for="(log, index) in observerResults" 
            :key="index"
            class="log-item"
          >
            {{ log }}
          </div>
        </div>
      </div>
    </section>

    <!-- 底部导航 -->
    <BottomNavigation />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import BottomNavigation from './BottomNavigation.vue'

// 工厂模式相关
const activeFactory = ref(null)
const factoryResult = ref('')

const factoryTypes = [
  { value: 'email', label: '邮件通知', icon: '📧' },
  { value: 'sms', label: '短信通知', icon: '📱' },
  { value: 'push', label: '推送通知', icon: '🔔' }
]

// 观察者模式相关
const observerResults = ref([])
const observerEvents = [
  { type: 'like', label: '点赞事件', icon: '👍' },
  { type: 'view', label: '浏览事件', icon: '👁️' },
  { type: 'comment', label: '评论事件', icon: '💬' }
]

// 测试工厂模式
const testFactory = async (type) => {
  activeFactory.value = type
  
  try {
    const response = await fetch(`http://localhost:8000/demo/factory`)
    const data = await response.json()
    
    // 创建对应的通知处理器
    const handlerNames = {
      'email': '邮件通知处理器',
      'sms': '短信通知处理器',
      'push': '推送通知处理器'
    }
    
    factoryResult.value = `✅ 成功创建 ${handlerNames[type]}！\n模拟发送通知：${getFactoryMessage(type)}`
  } catch (error) {
    factoryResult.value = `❌ 错误：${error.message}`
  }
}

const getFactoryMessage = (type) => {
  const messages = {
    'email': '你的帖子有新的点赞！',
    'sms': '有人评论了你的帖子',
    'push': '你的帖子被收藏了'
  }
  return messages[type] || '通知消息'
}

// 测试观察者模式
const testObserver = async (eventType) => {
  // 清空之前的结果
  observerResults.value = []
  
  try {
    // 调用后端API
    const response = await fetch(`http://localhost:8000/demo/observer?event_type=${eventType}&post_id=1`, {
      method: 'POST'
    })
    
    if (!response.ok) {
      throw new Error('请求失败')
    }
    
    const data = await response.json()
    
    // 逐个显示观察者的执行结果
    if (data.logs && data.logs.length > 0) {
      for (let i = 0; i < data.logs.length; i++) {
        setTimeout(() => {
          observerResults.value.push(data.logs[i])
        }, i * 300)
      }
    } else {
      observerResults.value.push('⚠️ 没有观察到任何输出')
    }
  } catch (error) {
    observerResults.value.push(`❌ 错误：${error.message}`)
  }
}

// 页面加载时展示说明
onMounted(() => {
  console.log('设计模式演示页面已加载')
})
</script>

<style scoped>
.demo-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-bottom: 60px;
}

.demo-header {
  text-align: center;
  padding: 40px 20px 30px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.demo-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: #666;
}

.demo-section {
  background: white;
  margin: 20px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title .icon {
  font-size: 32px;
}

.section-title h2 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.demo-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.demo-btn:hover {
  border-color: #ff2442;
  background: #fff0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255,36,66,0.2);
}

.demo-btn.active {
  border-color: #ff2442;
  background: #ff2442;
  color: white;
}

.observer-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.observer-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.btn-icon {
  font-size: 18px;
}

.result-box {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  border-left: 4px solid #ff2442;
}

.result-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  font-size: 14px;
}

.result-content {
  color: #555;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-line;
}

.observer-logs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-item {
  padding: 10px;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  color: #555;
  border-left: 3px solid #667eea;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式 */
@media (max-width: 768px) {
  .demo-header {
    padding: 30px 16px 20px;
  }

  .demo-header h1 {
    font-size: 24px;
  }

  .demo-section {
    margin: 16px;
    padding: 20px;
  }

  .button-group {
    flex-direction: column;
  }

  .demo-btn {
    width: 100%;
  }
}
</style>

